<script setup lang="ts">
  import { ref } from 'vue';

  const emits = defineEmits(['select']);
  const props = withDefaults(
    defineProps<{
      image?: string;
      title?: string;
      type?: string;
    }>(),
    {
      image: '',
      title: '标题',
      type: '',
    }
  );

  const checked = ref(false);
  const handleChange = (value: boolean) => {
    emits('select', value);
  };
</script>

<template>
  <div class="m-info-item">
    <div class="mii-top flex-vcenter">
      <span class="flex-vcenter"
        ><a-checkbox disabled :value="checked" @change="handleChange"></a-checkbox
      ></span>
      <span style="margin-left: 8px; font-weight: 600; font-size: 15px">{{
        props.title
      }}</span>
    </div>
    <div v-if="props.type === 'slot'" >
      <slot></slot>
    </div>
    <div v-else class="mii-body flex-vcenter" style="height: 80px">
      <div><a-image width="65" height="65" :src="props.image" /></div>
      <div
        class="flex-1 flex miib-content"
        style="justify-content: space-between; padding: 8px 0; height: 80%"
      >
        <span>
          <slot name="left"></slot>
        </span>
        <span>
          <slot name="center"></slot>
        </span>
        <span>
          <slot name="right"></slot>
        </span>
      </div>
    </div>
  </div>
</template>

<style lang="less">
  .m-info-item {
    padding: 5px;
    border: 1px solid var(--color-neutral-3);
    border-radius: 4px;
  }

  .mii-top {
  }

  .mii-body {
    padding: 0px 10px;
    padding-right: 20%;

    .miib-content {
      align-items: start;
      margin-left: 10px;

      & > span {
        height: 100%;
        width: 33%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        // align-items: center;
      }

      .label {
        margin-right: 20px;
      }

      .value {
        color: var(--color-text-2);

        &.green {
          color: rgb(var(--green-6));
        }

        &.blod {
          font-weight: 600;
        }
      }
    }
  }
</style>
